<template>
  <div>
    <div class="staff-top-item-wrapper">
      <div v-for="(item, index) in topData" :key="index" class="staff-top-item" :class="{ mr24: index === 0 }" @click="goOther(index)">
        <div class="staff-top-item-box" :style="cursorIt(index)">
          <div class="staff-top-item-name">
            {{ item.name }}
            <div class="today ml8" v-if="index == 0">今日：{{ allCount }}</div>
          </div>
          <img :src="item.left" alt="" srcset="" class="img-left" :style="index == 0 ? 'left:20%' : ''" />
          <div class="staff-top-item-mcb" :style="cursorIt(index)">
            <img :src="item.left" alt="" srcset="" class="img-left" :style="{ left: index == 0 ? '20%' : '' }" />
          </div>
          <div class="staff-top-item-num">
            <a-tooltip placement="bottom" v-if="index == 0">
              <template slot="title">
                <span>{{ item.num }}</span>
              </template>
              <div :style="index == 0 ? 'border-right: 1px solid #fff;' : ''">
                <div class="overflowW" @click="goTableData(null)">{{ item.num }}</div>
              </div>
            </a-tooltip>
            <div v-else>
              {{ item.num }}
            </div>
            <div v-if="index == 0" class="drz" @click="goTableData(1)">
              <div>待入职</div>
              {{ item.waitStaffCount }}
            </div>
            <div v-if="index == 0" class="drz" @click="goTableData(2)">
              <div>在职</div>
              {{ item.staffCount }}
            </div>
            <div v-if="index == 0" class="drz" @click="goTableData(4)">
              <div>已离职</div>
              {{ item.leaveStaffCount }}
            </div>
            <div class="img">
              <img :src="item.right" alt="" srcset="" />
            </div>
          </div>
        </div>
        <div class="staff-top-item-mca"></div>
        <div class="staff-top-item-mcc"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from "@/api/overview/staff";
import { getChildrenComany, getComany } from "@/api/overview/employer";
import { postQueryCount } from "../api";
import { mapState } from "vuex";

const topData = [
  {
    name: "全部员工数",
    num: "",
    left: require("@/assets/img/overview/ygbj2x.png"),
    right: require("@/assets/img/overview/yg2x.png")
  },
  {
    name: "用工单位数",
    num: "",
    left: require("@/assets/img/overview/gsbj2x.png"),
    right: require("@/assets/img/overview/gs2x.png")
  }
  // {
  //   name: "用工分组数",
  //   num: "",
  //   left: require("@/assets/img/overview/fzbj2x.png"),
  //   right: require("@/assets/img/overview/fz2x.png")
  // }
];
export default {
  props: ["siteId"],
  data() {
    return {
      topData,
      allCount: 0
    };
  },
  computed: {
    ...mapState(["site"])
  },
  watch: {
    siteId: {
      handler(newValue) {
        if (newValue) {
          this.init();
        }
      },
      immediate: true
    }
  },
  created() {
    this.cursorIt();
  },
  methods: {
    goTableData(e) {
      this.$emit("update:statusValShow", e);
    },
    cursorIt(e) {
      if (e === 0) {
        return {
          background: "linear-gradient(270deg, #FF8383 0%, #FF4D8A 52%, #FFBF2F 100%)",
          boxShadow: "0px 4px 10px 0px rgba(255, 108, 98, 0.5)"
        };
      }
      if (e === 1) {
        return {
          background: "linear-gradient(270deg, #7E66F6 0%, #3A4CFF 55%, #2F98FF 100%)",
          boxShadow: "0px 4px 10px 0px rgba(106, 102, 246, 0.5)"
        };
      }
      if (e === 2) {
        return {
          background: "linear-gradient(270deg, #24CDAA 0%, #2D86FF 48%, #2FA4FF 100%)",
          boxShadow: "0px 4px 10px 0px rgba(102, 215, 246, 0.5)"
        };
      }
    },
    init() {
      const data = {};
      if (this.siteId && this.siteId !== "undefined") {
        data.companyIds = this.siteId;
        data.type = this.site.selectType || "site";
      }
      this.getComanyList();
      // this.getChildrenComanyList();
      this.onPostQueryCount();
      getCount(data)
        .then((res) => {
          const { staffCount, waitStaffCount, leaveStaffCount } = res.data;
          this.topData[0].num = parseInt(staffCount) + parseInt(waitStaffCount) + parseInt(leaveStaffCount);
          this.topData[0].staffCount = staffCount; // 在职员工数
          this.topData[0].waitStaffCount = waitStaffCount; // 待入职员工数
          this.topData[0].leaveStaffCount = leaveStaffCount; // 已离职员工数
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    computeClassLeft(index) {
      if (index === 0) return "staff-top-item-left-one staff-top-item-left";
      else if (index === 1) {
        return "staff-top-item-left-two staff-top-item-left";
      } else if (index === 2) {
        return "staff-top-item-left-three staff-top-item-left";
      }
    },
    computeClassRight(index) {
      if (index === 0) return "staff-top-item-right-one staff-top-item-right";
      else if (index === 1) {
        return "staff-top-item-right-two staff-top-item-right";
      } else if (index === 2) {
        return "staff-top-item-right-three staff-top-item-right";
      }
    },
    goOther(index) {
      if (index === 0) {
        this.$nextTick(() => {
          const dom = document.querySelector(".main-content-wrapper");
          dom.scrollTop = 712;
        });
      } else if (index === 1) {
        this.$router.push({
          path: "/overview/employer",
          query: { pageType: "cardCount" }
        });
      } else if (index === 2) {
        this.$router.push({
          path: "/overview/subsidiary",
          query: { pageType: "cardCount" }
        });
      }
    },
    // 获取分组数
    // getChildrenComanyList() {
    //   this.tableLoading = true;
    //   const tenantId = sessionStorage.getItem("tenantId");
    //   getChildrenComany({ ids: tenantId }).then((res) => {
    //     this.topData[2].num = res.data.entityCount;
    //   });
    // },
    getComanyList() {
      getComany({ ids: this.siteId.split(",") }).then((res) => {
        this.topData[1].num = res.data.entityCount;
      });
    },
    async onPostQueryCount() {
      try {
        const { data } = await postQueryCount({
          companyIds: this.siteId.split(","),
          date: this.moment().format("YYYY-MM-DD HH:mm:ss"),
          status: 1
        });
        this.allCount = data.allCount;
        sessionStorage.setItem("allCounts", data.allCount);
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.staff-top-item-wrapper {
  display: flex;
  justify-content: space-between;
}
.staff-top-item {
  flex: 1;
  height: 118px;
  border-radius: 8px;
  padding: 0 10px;
  position: relative;
  cursor: pointer;
}
.staff-top-item:hover {
  .staff-top-item-mca {
    background: rgba(255, 255, 255, 0.4);
  }
}
.staff-top-item-box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  position: relative;
  padding: 16px 24px;
  .staff-top-item-name {
    color: #fff;
    font-size: 16px;
    .today {
      display: inline-block;
      min-width: 82px;
      height: 20px;
      line-height: 20px;
      background: #ffffff;
      border-radius: 10px;
      color: #ff7085;
      font-size: 12px;
      text-align: center;
      vertical-align: text-top;
    }
  }
  .img-left {
    width: 90px;
    height: 98px;
    position: absolute;
    top: 15px;
    left: 25%;
  }
}
.staff-top-item-mca {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 72px;
  background: rgba($color: #fff, $alpha: 0.2);
  border: 1px solid;
  border-color: rgba($color: #fff, $alpha: 0.3);
  // border-top: 0px;
  border-radius: 0px 0px 8px 8px;
  z-index: 2;
}
.staff-top-item-mcc {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 72px;
  border-radius: 0px 0px 8px 8px;
  filter: blur(20px);
  z-index: 2;
}
.staff-top-item-mcb {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  border-radius: 0px 0px 8px 8px;
  filter: blur(4px);
  z-index: 1;
  img {
    top: -38px !important;
  }
}
.staff-top-item-num {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  z-index: 3;
  padding: 12px 24px;
  display: flex;
  color: #fff;
  justify-content: space-between;
  & > div {
    font-size: 24px;
    height: 40px;
    &:nth-child(1) {
      width: 132px;
      height: 24px;
      line-height: 24px;
      margin-top: 16px;
      .overflowW {
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .drz {
    font-size: 18px;
    div {
      margin-top: 6px;
      font-size: 12px;
    }
  }
  .img {
    width: 40px;
    height: 40px;
    margin-top: 6px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.staff-top-item-img {
  position: absolute;
  bottom: 0;
}
.staff-top-item-left {
  width: 65%;
  padding: 24px 0 0 30px;
  border-radius: 8px 0 0 8px;
}
.staff-top-item-right {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 8px 8px 0;
}
.staff-top-item-left-one {
  background: linear-gradient(135deg, #ffc200 0%, #ff9700 100%);
}
.staff-top-item-right-one {
  background: linear-gradient(180deg, #ffbb4b 0%, #ffa81c 100%);
}
.staff-top-item-left-two {
  background: linear-gradient(135deg, #5db1f9 0%, #617cf2 100%);
}
.staff-top-item-right-two {
  background: linear-gradient(180deg, #8eacf7 0%, #7090f4 100%);
}
.staff-top-item-left-three {
  background: linear-gradient(135deg, #ff945b 0%, #ff685b 100%);
}
.staff-top-item-right-three {
  background: linear-gradient(180deg, #ff9c8b 0%, #ff7c6b 100%);
}
</style>
